<template>
  <a-modal
    :title="$t('app.setting.modal.edit')"
    :visible="modalInfoEdit.visible"
    :width="800"
    footer=""
    @cancel="modalFooter(0)"
    :maskClosable="false"
  >
    <!-- loading    -->
    <a-spin v-if="!modalInfoEdit.sourceData"  class="spin"/>
    <!-- loading end -->

    <div v-if="modalInfoEdit.sourceData"> 
      <!-- 此处循环遍历组件进行匹配处理 -->
      <div v-for="( itemWrap, indexWrap) in modalInfoEdit.sourceData" :key="indexWrap" style="margin-top: 20px;">
        <!-- 临时的分割线-可保留  样式根据需要随时进行调整处理 -->
        <div v-for="(item, index) in itemWrap" :key="index">
          <ModifyForm
            @formValidateResult="formValidateResult"
            :componentsObject="{
              title: item.title,
              keys: item.keys,
              placeholder: item.placeholder,
              type: item.type,
              value: item.value,
              index: index,
              indexWrap: indexWrap,
              validateObj: item.validateObj
            }"
            :key="Math.random()"
          ></ModifyForm>
        </div>
        <div style="width: 80%; border-bottom-style: dashed; color: #ccc; border-bottom-width: 1px; margin: 0 auto;"> </div>
        
      </div>  

      <!-- 底部按钮 -->
      <ModalFooter @modalFooter="modalFooter" ref="modalFooterRef"></ModalFooter>

    </div>
  </a-modal>
</template>

<script>

// 引入展示结构组件
import ModifyForm from './ModifyForm'
// 引入新增的信息和数据结构
import { modifyItem , listItemById } from '../../api/data'
// 引入 store
import store from '@/store'
// 引入公共的底部按钮（确定+取消）
import ModalFooter from './ModalFooter'

export default {
  name: 'Modal',
  components: {
    ModifyForm,
    ModalFooter
  },
  props: {
    modalInfoEdit: Object,
    // modalInfoEdit:{
    //   visible: false,  // false不显示， true显示
    //   multi: 1,        // 2-多操作  1-单操作
    //   sourceData: '',  // 源数据
    // }
    requestUrl: Object,
    modalEditStrcture: Object
  },
  data () {
    return {
      modalInfoAddValidate: [],
      visible: true,
      initValidate: true,
      // currentFormData: {},
      // currentFormData < - Array - >动态表单的数据的存储
      currentFormData: [],
    }
  },

  created(){},

  mounted(){
    // 每次进入重置数据
    this.modalInfoEdit.sourceData = '' 
    // 请求新增需要的数据结构, 增加部分可不请求,通过配置信息进行处理,但是编辑部分因为包含初始的数据,所以需要额外的请求,并且结合初始的
    // 配置信息进行处理
    // console.log("在编辑组件的内部进行id的测试处理-this.modalInfoEdit.id-", this.modalInfoEdit.id);
    this.listItemById(this.modalInfoEdit.id);
  },
  
  methods: {
    
    // 请求新增的数据和数据结构
    async listItemById(param){
      let responseData = await listItemById(param);
      if(responseData.code){
        this.getEditModalInfo(responseData.data)
      }else{
        this.$message.error("编辑数据请求失败")
      }
    },

    // 获取原始信息
    getEditModalInfo(valueObj){
      valueObj.map((itemWrap, indexWrap)=>{ // 外层原始数据进行循环处理
        let valueStore = {}
        let resultArr = []
        this.modalEditStrcture.map((item, index)=>{  // 内层结构循环
          for(let i in itemWrap){
            if(String(i) === String(item.keys)){
              let tempObj = {
                title: item.title,
                keys: item.keys,
                placeholder: item.placeholder,
                type: item.editType,
                value: itemWrap[item.keys],
                validateObj: item.validateObj
              }
              resultArr.push(tempObj)
            }
            valueStore[item.keys] = itemWrap[item.keys]
            valueStore.id = itemWrap.id
          }
        }) 
        this.currentFormData.push(valueStore)
          if(!this.modalInfoEdit.sourceData){
          this.modalInfoEdit.sourceData = []
        }
        this.modalInfoAddValidate.push(false)
        this.modalInfoEdit.sourceData.push(resultArr)
      })
    },

    // modal footer confirm and exit &e=1
    modalFooter(e){  
      if(e){  // confirm and do submit
        this.modifySubmit()
      }else{ // cancel and exit  &e=0
        this.modalInfoEdit.visible = false
      }
    },

    /**
     * 每个单独的组件的验证的结果
     * @return: e=> <object> { index: number, seniorValue: string, through: boolean }
     */
    formValidateResult(e){
      if(!e.through){
        this.initValidate = false
      }else{
        this.currentFormData[e.indexWrap][e.keys]  = e.seniorValue
      }
    },

    // 点击确定
    modifySubmit(){
      this.initValidate = true
      this.$store.dispatch('CheckFormTransform')
      setTimeout(()=>{
        if(this.initValidate){
          // this.currentFormData => 编辑修改的数据的信息, 格式以对象数组的形式存储 [{},{}]
          this.modifyItem(this.currentFormData)
        }else{
          this.$message.warning("信息填写有误，请按照提示修改已经填写的信息");
        }
        this.$refs.modalFooterRef.closeLoading();
      }, 500)
    },


    // 修改数据的请求
    async modifyItem(parameter){
      let responseData = await modifyItem(parameter, this.requestUrl.add)
      if(responseData.code){
        this.$message.success("编辑成功");
      }else{
        this.$message.error("编辑失败");
      }
      this.modalInfoEdit.visible = false
    },

    // 展示 modal
    showModal() {
      this.modalInfoEdit.visible = true;
    },
    
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.modalInfoEdit.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },

    handleCancel(e) {
      this.modalInfoEdit.visible = false;
    }
  },

  watch: {
    
  }
}
</script>

<style lang="less" scoped>
.spin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
